<template>
  <div class="employee-container">
    <el-row  style="margin-bottom: 20px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理系统</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
  <el-table
    :data="tableData"
    style="width: 100%"
    max-height="250">
    <el-table-column
      fixed
      prop="date"
      label="获取订单日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="num"
      label="商品编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="买家姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="买家地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="price"
      label="总金额"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除订单
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
   </template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    name: "order", data(){
      return{
        tableData:[{
          date:'2021-4-15',
          num:'01',
          name:'李亮',
          address:'天津市津南区',
          price:'170'
        },{
          date:'2021-4-17',
          num:'02',
          name:'张三',
          address:'天津市北辰区',
          price:'150'
        },{date:'2021-4-20',
          num:'03',
          name:'李四',
          address:'天津市西青区',
          price:'180'
    },{
         date:'2021-4-23',
         num:'04',
         name:'王五',
         address:'天津市武清区',
         price:'130'
    },{date:'2021-4-25',
       num:'05',
       name:'李涛',
       address:'天津市宝坻区',
       price:'170'



        }]
      }
    },mounted() {
      /*挂载结束之后*/
      var _this=this;
      this.axios({
        url:'http://localhost:3000/order/list',
        method:'get'
      }).then(function (res) {
        _this.tableData=res.data;
      })


    }
  }
</script>

<style scoped>

</style>
